import React, { createContext } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { connect, DispatchProp } from 'dva';

import SearchForm from './components/SearchForm';
import { AddItemBar } from '@/components/AddItemBar';
import ListTable from './components/ListTable';
import { StoreState } from '../../../common/store/store';
import { Order } from '../model';
import OrderDeliveryFormModal from './components/OrderDeliveryFormModal';

interface ListProps extends DispatchProp {
  orders: Order[];
  loading?: boolean;
}

interface ListState {
  showModal: boolean;
  currentDeliverOrder?: Order;
}

export const ListContext = createContext<List>({} as List);

export class List extends React.Component<ListProps> {
  formRef!: React.Component<FormComponentProps>;

  orderDeliveryFormRef!: React.Component<FormComponentProps>;

  state: ListState = {
    showModal: false,
  };

  onOrderStatusChange(order: Order) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/update',
      payload: order,
    });
  }

  onTableRowRemove(id: number) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/remove',
      id,
    });
  }

  onOrderDeliverModalShow(order: Order) {
    this.setState({
      currentDeliverOrder: order,
      showModal: true,
    });
  }

  onOrderDeliver() {
    const { form } = this.orderDeliveryFormRef.props;
    const { validateFields } = form;
    const { dispatch } = this.props;
    validateFields((err, values: Order) => {
      if (!err && dispatch) {
        dispatch({
          type: 'order/update',
          payload: {
            id: Number(values.id),
            status: 2,
            deliveryCompany: values.deliveryCompany,
            deliverySn: values.deliverySn,
          },
          callback: () => {
            this.setState({
              showModal: false,
            });
          },
        });
      }
    });
  }

  setFormRef = (formRef: any) => {
    this.formRef = formRef;
  };

  setOrderDeliveryFormRef = (formRef: any) => {
    this.orderDeliveryFormRef = formRef;
  };

  handleSearch = () => {
    const { form } = this.formRef.props;
    const { dispatch } = this.props;
    console.log(form.getFieldsValue());
    dispatch({
      type: 'order/query',
    });
  };

  render() {
    const { orders, loading } = this.props;

    return (
      <ListContext.Provider value={this}>
        <div className="row-group">
          <SearchForm wrappedComponentRef={this.setFormRef} onSearch={this.handleSearch} />
          <AddItemBar />
          <ListTable orders={orders} loading={loading} />
          <OrderDeliveryFormModal
            wrappedComponentRef={this.setOrderDeliveryFormRef}
            orderData={this.state.currentDeliverOrder}
            visible={this.state.showModal}
            onCreate={() => {
              this.onOrderDeliver();
            }}
            onCancel={() => {
              this.setState({
                showModal: false,
              });
            }}
            confirmLoading={loading}
          />
        </div>
      </ListContext.Provider>
    );
  }
}

const mapStateToProps = (state: StoreState) => ({
  orders: state.order.orders,
  loading: state.loading.models.order,
});

export default connect(mapStateToProps)(List);
